import { Popup, Image } from 'antd-mobile'
import { CloseOutline } from 'antd-mobile-icons'
import './action-detail-popup.css'

interface ActionDetailPopupProps {
  visible: boolean
  onClose: () => void
  actionName?: string
  actionImage?: string
}

const ActionDetailPopup = ({ 
  visible, 
  onClose, 
  actionName = "平板支撑",
  actionImage = "/平板支撑.png"
}: ActionDetailPopupProps) => {

  return (
    <Popup
      visible={visible}
      onMaskClick={onClose}
      position="bottom"
      bodyStyle={{
        borderRadius: '20px 20px 0 0',
        padding: 0,
        maxHeight: '85vh',
        overflow: 'hidden'
      }}
    >
      <div className="action-detail-popup">
        {/* 关闭按钮 */}
        <button className="close-btn" onClick={onClose}>
          <CloseOutline />
        </button>

        {/* 动作图片 */}
        <div className="action-image-section">
          <Image
            src={actionImage}
            alt={actionName}
            width="100%"
            height={280}
            fit="cover"
          />
        </div>

        {/* 动作信息 */}
        <div className="action-content">
          <h2 className="action-title">{actionName}</h2>
          
          {/* 动作描述 */}
          <div className="action-description">
            <p>俯卧，双肘弯曲支撑在地面上，肩膀和肘关节垂直于地面，双脚踩地，身体离开地面，躯干伸直，头部、肩部、胯部和踝部保持在同一平面，腹肌收紧，盆底肌收紧，脊椎延长，眼睛看向地面，保持均匀呼吸。</p>
          </div>

          {/* 器械部分 */}
          <div className="equipment-section">
            <h3 className="section-title">器械</h3>
            <div className="equipment-item">
              <div className="equipment-image">
                <Image
                  src="/瑜伽垫.png"
                  alt="瑜伽垫"
                  width={60}
                  height={60}
                  fit="cover"
                />
              </div>
              <span className="equipment-name">瑜伽垫</span>
            </div>
          </div>

          {/* 动作要领 */}
          <div className="action-points">
            <h3 className="section-title">动作要领</h3>
            <div className="points-list">
              <div className="point-item">
                <span className="point-number">1</span>
                <p className="point-text">肘关节和肩关节垂直于地面，保持90度角，身体成一条直线，不要塌腰或撅臀。</p>
              </div>
              <div className="point-item">
                <span className="point-number">2</span>
                <p className="point-text">增加难度可以进行单腿平板支撑或在背部加重物，保持核心肌群紧张，维持身体稳定。</p>
              </div>
            </div>
          </div>

          {/* 关闭按钮 */}
          <button
            onClick={onClose}
            className="close-action-btn"
          >
            关闭
          </button>
        </div>
      </div>
    </Popup>
  )
}

export default ActionDetailPopup
